<template>
  <div class="userinfo">
    <u-cell-group>
      <u-cell size="large" isLink url="/pagesB/headsculpture/headsculpture-set">
        <template #title>
          <view><span style="color: #ff0000">*</span>头像</view>
        </template>
        <template #value>
          <view class="u-slot-value">
            <!-- <image src="../../assets/images/login.jpg" alt="" /> -->
            <image :src="userinfo.avatar" />
          </view>
        </template>
      </u-cell>

      <u-cell size="large" isLink @click="goNickName">
        <template #title>
          <view><span style="color: #ff0000">*</span>昵称</view>
        </template>
        <template #value>
          <view class="u-slot-value">
            <span>{{ userinfo.nickname }}</span>
          </view>
        </template>
      </u-cell>
      <u-cell size="large" isLink @click="goAddress">
        <template #title>
          <view>地址</view>
        </template>
        <template #value>
          <view class="u-slot-value">
            <span class="address_info">{{ userinfo.address }}</span>
          </view>
        </template>
      </u-cell>
      <u-cell size="large" :isLink="false" @click="pathEmailset">
        <template #title>
          <view><span style="color: #ff0000">*</span>邮箱</view>
        </template>
        <template #value>
          <view class="u-slot-value">
            <span>{{ userinfo.email }}</span>
          </view>
        </template>
      </u-cell>
      <u-cell size="large" :isLink="false">
        <template #title>
          <view>用户ID</view>
        </template>
        <template #value>
          <view class="u-slot-value">
            <span style="color: rgba(0, 0, 0, 0.38)">{{ userinfo.unid }}</span>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </div>
</template>
<script setup>
import { userApi } from "@/api/user";
//获取用户信息
onLoad(() => {});
onShow(() => {
  getUserInfo();
});
const userinfo = ref({});
const getUserInfo = () => {
  userApi.userinfo().then((res) => {
    console.log("用户信息", res.data);
    userinfo.value = res.data;
  });
};
// const userinfo = ref({
//   email: "qlypublic@qq.com"
// });
//去邮箱
const pathEmailset = () => {
  uni.navigateTo({
    url: `/pagesB/emailinfo/emailinfo-set?email=${userinfo.value.email}`
  });
};

//去昵称
const goNickName = () => {
  uni.navigateTo({
    url: `/pagesB/nickname/nickname-set?nickname=${userinfo.value.nickname}`
  });
};

//去地址
const goAddress = () => {
  uni.navigateTo({
    url: `/pagesB/addressedit/addressedit-set?address=${userinfo.value.address}`
  });
};
</script>

<style lang="scss" scoped>
.address_info {
  display: inline-block;
  // border: 1rpx solid red;
  margin-top: 10rpx;
  width: 500rpx;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
:deep(.u-cell__body){
  padding: 30rpx 0rpx;
}
.userinfo {
  padding: 32rpx;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  //   border: 1px solid red;
  .u-slot-value {
    padding: 0;

    image {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
    }
    span {
      display: inline-block;
      height: 58rpx;
      line-height: 58rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
    }
  }
}
</style>